<div appBsModal #editmodal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal"
   aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" *ngIf="motherSite">
                        来源站点：{{motherSite}}({{fromLanguage}})
                    </h5>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
                        <i aria-hidden="true" class="bi bi-x"></i>
                    </button>
                </div>

                <div class="modal-body"  [busyIf]="saving">
                    <div class="row">
                        <div class="col-6">
                            <div class="card card-default gutter-b  card-outline">
                                <div class="card-header align-items-center border-0">
                                    <h3 class="card-title align-items-start " >
                                        <div class="input-group">
                                            <input type="text" style="width:180px;" [placeholder]="l('SearchWithThreeDot')" class="form-control" id="search" autocomplete="off" 
                                              (keydown.enter)="$event.preventDefault()" (input)="_filter($event.target.value)" />
                                            <div class="input-group-append">
                                            <div class="input-group-text" style="background-color: #fff;"><i class="icon-magnifier"></i></div>
                                            </div>
                                        </div>
                                    </h3>
                                    <div class="card-tools">
                                        <button 
                                            (click)="expandAll()" title='{{"OpenAll" | localize}}' class="btn blue btn-circle btn-outline mr-1">
                                            <i class="fa fa-folder-open"></i> 
                                        </button>
                                        <button  
                                            (click)="collapseAll()"  title='{{"CloseAll" | localize}}' class="btn blue btn-circle btn-outline mr-1">
                                            <i class="fa fa-folder"></i>
                                        </button>
                                        <button
                                            (click)="save()" class="btn blue btn-circle btn-outline">
                                            <i class="fa bi-plus-lg"></i> {{"Submit" | localize}}
                                        </button>
                                       
                                    </div>
                                </div>
                                <div class="card-body">
                                    <p-tree #ptree [hidden]="!totalUnitCount" [value]="treeData" 
                                            selectionMode="checkbox"
                                            [(selection)]="selectedOu"
                                            (onNodeSelect)="nodeSelect($event)"
                                            (onNodeUnselect)="onNodeUnselect($event)" [propagateSelectionUp]="false"  
                                            [propagateSelectionDown]="true"
                                            >
                                        <ng-template let-node pTemplate="default">
                                            <div>
                                                <span>
                                                    {{node.label}}
                                                </span>
                                                
                                            </div>
                                        </ng-template>
                                    </p-tree>
                                    <div *ngIf="!totalUnitCount" class="text-muted">
                                        {{"NoMenuDefinedYet" | localize}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <addMenu #lookOverMenuItem [readonly]="true" [tenantId]="motherSiteTenantId" ></addMenu>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
